<template>
	<view class="">
		<!-- 顶部消息提示 -->
		<u-top-tips ref="uTips"></u-top-tips>

		<view class="content">
			<service-box :imgs="accountAndCouponImgs" title='' @clickCard="clickCard" />
			<view class="ad-card">
				<uni-swiper-dot :info="info" :current="current" field="content" :mode="mode">
					<swiper class="swiper-box" @change="change" :autoplay="true" interval="5000" :circular="true">
						<swiper-item v-for="(item ,index) in info" :key="index">
							<view class="swiper-item">
								<image :src='"../../static/"+ item.content' mode="aspectFit"></image>
							</view>
						</swiper-item>
					</swiper>
				</uni-swiper-dot>
			</view>
			<service-box :imgs="ConvenientImgs" title="便捷功能" @clickCard="clickCard" />
		</view>
		<ws v-if="listenOrder" @recieveOrderInfo="recieveOrderInfo" />
		<u-popup v-model="show" mode="bottom" :safeAreaInsetBottom="true" :maskCloseAble="true" length="auto"
			:mask="true" @close="close">
			<view class="close-btn">
				<grabbing-order-box v-if="this.recieveOrder" :recieveOrder="this.recieveOrder"
					@rejectOrder="rejectOrder" />
				<u-button v-else @click="close" size="medium">取消听单</u-button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	let _this;
	import serviceBox from '../conponets/serviceBox.vue'
	import grabbingOrderBox from './conponets/grabbingOrderBox.vue'
	import ws from "../../webSocket/index.vue"
	import {
		driverMenu,
	} from '../../../config/mine/mine-menu.js'
	import {
		mapGetters
	} from 'vuex'
	import {
		showInfo
	} from '../../../api/user/attestation.js'
	export default {
		components: {
			serviceBox,
			grabbingOrderBox,
			ws
		},
		data() {
			return {
				// 余额、优惠券啥的
				accountAndCouponImgs: [{
						url: 'balance.png',
						text: '余额'
					},
					{
						url: 'coupon.png',
						text: '优惠券'
					},
					{
						url: 'interests.png',
						text: '权益卡'
					},
				],
				info: [{
					content: 'advertisement/1.png'
				}, {
					content: 'advertisement/2.png'
				}, {
					content: 'advertisement/3.png'
				}, {
					content: 'advertisement/4.png'
				}],
				current: 0,
				mode: 'round',
				// 便捷功能
				ConvenientImgs: [],
				// 优惠活动
				DiscountImags: [],
				show: false,
				listenOrder: false,
				R: 6371.004,
				recieveOrder: undefined,
			};
		},
		computed: {
			...mapGetters([
				'listen',
				'idNumber',
			])
		},
		mounted() {
			_this = this;
			//this.isLogin();
		},
		watch: {
			listen(val) {
				if (val) {
					this.show = true;
					this.$refs.uTips.show({
						duration: 2000,
						title: '正在听单···',
						type: 'success'
					});
				} else {
					this.show = false;
					this.$refs.uTips.show({
						duration: 2000,
						title: '取消听单···',
						type: 'warning'
					});
				}
			}
		},
		created() {
			this.getConvenientImgs();
		},
		methods: {
			// 获取便捷功能的相关信息
			getConvenientImgs() {
				this.ConvenientImgs = driverMenu;
			},
			// 广告轮播图
			change(e) {
				this.current = e.detail.current;
			},
			// 点击卡片
			clickCard(item) {
				if (!this.$checkLogin()) {
					return;
				}
				// 通过卡片名字分别来实现对应的功能
				switch (item.text) {
					case '立即听单': {
						if (this.$checkRole()) {
							uni.showToast({
								title: '请先认证成为司机用户哦',
								icon: 'none',
								duration: 2000
							})
							break;
						}
						this.listenOrder = true;
						break;
					};
				case '司机招募': {
					let date = {
						idNumber: this.idNumber,
					}
					_this.$store.dispatch('userInfo/DRIVERINFO', date)
						.then(res => {
								if (res.code === 200) {
									uni.navigateTo({
										url: '../user/driverAttestation',
										animationType: 'pop-in',
										animationDuration: 200
									});
								}
							});
							break;
						};

					case '地图': {
						uni.navigateTo({
							url: '../map/map',
							animationType: 'pop-in',
							animationDuration: 200
						});
						break;
					};
					case '车辆管理': {
						if (this.$checkRole()) {
							uni.showToast({
								title: '请先认证成为司机用户哦',
								icon: 'none',
								duration: 2000
							})
							break;
						}
						uni.navigateTo({
							url: '../driver/vehicle/index',
							animationType: 'pop-in',
							animationDuration: 200
						});
						break;
					};
					case '运力发布': {
						if (this.$checkRole()) {
							uni.showToast({
								title: '请先认证成为司机用户哦',
								icon: 'none',
								duration: 2000
							})
							break;
						}
						uni.navigateTo({
							url: '../driver/publish/index',
							animationType: 'pop-in',
							animationDuration: 200
						})
						break;
					};
					case '意见反馈': {
						uni.navigateTo({
							url: '../feedback/feedback',
							animationType: 'pop-in',
							animationDuration: 200
						});
						break;
					};
					case '申诉记录': {
						uni.navigateTo({
							url: '../handel/handleList/handleList',
							animationType: 'pop-in',
							animationDuration: 200
						});
						break;
					};
				}
				},
				close() {
						console.log("关闭");
						this.listenOrder = false;
						this.show = false;
						this.recieveOrder = undefined;
					},
					recieveOrderInfo(roi) {
						console.log(roi);
						this.recieveOrder = roi;
					},
					rejectOrder() {
						this.recieveOrder = undefined;
					}
			}
		}
</script>
<style lang="scss">
	.message-box {}

	.content {
		display: flex;
		flex-direction: column;
		justify-content: center;

		.ad-card {
			margin: 5rpx 20rpx 10rpx 20rpx;
			height: 540rpx;

			.swiper-box {
				height: 550rpx;

				.swiper-item {
					display: flex;
					flex-direction: row;
					justify-content: center;
				}
			}

		}
	}

	.close-btn {
		height: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
	}

	.footer-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
</style>
